<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <!--    引入vue-->
    <script type="application/javascript" src="../js/vue.js"></script>

</head>
<body>

    <div id="app">
        <h1>{{title}}</h1>

        <h1 v-text="title"></h1>
        <button @click="fun01">按钮1</button>
        <br/>

        <input v-model="inputText" placeholder="请输入内容">
        <button @click ="fun02">获取</button>
        <br/>

        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>

        <!--        使用v-if-->

        <button  v-on:click="flag = !flag">按钮02</button>

        <h1 v-if="flag">原神启动</h1>


        <!--        //取反操作-->
        <h1 v-show="!flag"> 无畏契约启动</h1>
        <div></div>

    </div>
    <script>
        //创建vue实例
        let app =new Vue({
            //挂载点  #app   找到id为app的元素
           el:"#app",
            //定义变量的区域    vdata
            data(){
               return{
                   //定义变量   键值对  键  变量名字 值
                   key:"",
                   title:"vue学习开始",
                   //输入框的内容
                   inputText:"",
                   list:["苹果","香蕉","草莓","蓝莓"],
                   //通过改变变量的值来渲染
                   flag:false
               }
            },
            //定义方法的区域     vmethod
            methods: {
                //name() 定义一个name的方法
                name() {

                },
                fun01() {
                    //log
                    console.log("123456")
                    alert("方法1执行")
                },
                fun02(){
                    //在方法中调用变量 使用this
                    //this.inputTexta
                    alert(this.inputText)
                }

            },
        })


    </script>



</body>
</html>